<template>
  <div>
    <van-nav-bar safe-area-inset-top placeholder :title="siteName" left-arrow fixed @click-left="onClickLeft" >
      <template #right>
        <van-icon name="add-o" size="24" @click="bindSn" />
      </template>
    </van-nav-bar>

    <van-pull-refresh v-model="isLoading" :pulling-text="$t('PullingText')" :loosing-text="$t('PullingText')" :success-text="$t('refreshSuccee')" @refresh="onRefresh">
      <div class="invListBox" v-for="(inv,i) in invArr" :key="i">
        <div class="invList_t">
          <div class="invList_t_2">{{inv.inverterSN}}</div>
          <div class="isOnline">
            <img src="../assets/inv1.png" alt="Online" v-if="inv.enableFlag==1">
            <img src="../assets/inv2.png" alt="Offline" v-if="inv.enableFlag==0">
          </div>
          <div class="invList_t_3" v-if="inv.enableFlag==1">
            <van-icon name="setting-o" @click="goSetting(inv.inverterSN,inv.inverterType,inv.wifiSN,inv.transportType)" />
          </div>
        </div>
        <div class="siteContentBox" @click="goInvDetail(inv.inverterSN,inv.wifiSN,inv.inverterType)">
          <div class="siteContentList">
            <div class="siteContentList_l">{{$t('RegistrationNo')}}</div>
            <div class="siteContentList_r">{{inv.wifiSN}}</div>
          </div>
          <div class="siteContentList">
            <div class="siteContentList_l">{{$t('TodayYield')}}</div>
            <div class="siteContentList_r">{{inv.todayYield | units('kWh',2)}}</div>
          </div>
          <div class="siteContentList">
            <div class="siteContentList_l">{{$t('Power')}}</div>
            <div class="siteContentList_r">{{inv.gridPower | units('W',2)}}</div>
          </div>
          <div class="siteContentList" v-if='inv.batteryFlag == 1 ? true:false'>
            <div class="siteContentList_l">{{$t('Battery')}}</div>
            <div class="siteContentList_r">{{inv.batteryCapacity | numFilter(1,'%')}}</div>
          </div>
        </div>
      </div>
    </van-pull-refresh>
    <van-empty :description="$t('NoData')" v-if="invArr.length==0" />
  </div>
</template>

<script>
export default {
  data(){
    return {
      siteName:localStorage.getItem('siteName'),
      isLoading: false,
      invName:'',
      finished: false,
      invArr:[],
      error:false
    }
  },
  methods: {
    onClickLeft(){
      this.$router.push({path:'/main/sitedetail'});
    },
    bindSn(){
      sessionStorage.setItem('setFrom','/siteinvlist');
      this.$router.push({path:'/bindsn'});
    },
    goSetting(inverterSN,inverterType,wifiSN,transportType){
      localStorage.setItem("sn",inverterSN);
      localStorage.setItem('wifiSN',wifiSN);
      localStorage.setItem('inverterType',inverterType);
      localStorage.setItem('transportType',transportType)
      sessionStorage.setItem('setFrom','/siteinvlist');
      if(inverterType==14){
        this.$router.push({path:'/x3hybridg4set'});
      }else if(inverterType==15){
        this.$router.push({path:'/x1hybridg4set'});
      }else{
        this.$router.push({path:'/setting'});
      }
    },
    goInvDetail(inverterSN,wifiSN,inverterType){
      localStorage.setItem("sn",inverterSN);
      localStorage.setItem("wifiSN",wifiSN);
      localStorage.setItem('inverterType',inverterType);
      sessionStorage.setItem('setFrom','/siteinvlist');
      this.$router.push({path:'/inverterdetail'});
    },
    async getInvList(){
      this.comm.loadingShow();
      let data=await this.API.siteInvList(localStorage.getItem('domain'),{'tokenId':localStorage.getItem('tokenId'),'siteId':localStorage.getItem('siteId')});
      if(data.success){
        this.invArr = data.result;
      }
    },
    onRefresh(){
      this.isLoading = false;
      this.getInvList();
    }
  },
  mounted(){
    this.getInvList();
  }
}
</script>

<style scoped lang="less">
.van-hairline--bottom::after{
  border: none;
}
.invListBox{
  width: 100%;
  border-top: 1px solid #efefef;
  border-bottom: 1px solid #efefef;
  margin-top: 10px;
  background: #FFFFFF;
}
.invList_t{
  width: 100%;
  height: 40px;
  border-bottom: 1px dotted #e2e2e2;
  color: #323544;
}
.invList_t_2{
  float: left;
  height: 40px;
  line-height: 40px;
  white-space: nowrap;
  font-size: 16px;
  font-weight: bolder;
  margin-left: 15px;
}
.isOnline{
  float: left;
  margin: 10px 0 0 10px;
}
.isOnline img{
  width: 15px;
}
.invList_t_3{
  float: right;
  padding-top: 6px;
  margin-right: 15px;
}
.invList_t_3 i{
  font-size: 27px;
  color:#595758 ;
}
.siteContentBox{
 padding: 0 15px;
}
.siteContentList{
  height: 30px;
  line-height: 30px;
  width: 100%;
}
.siteContentList_l{
  float: left;
  color: #B6B6B6;
}
.siteContentList_r{
  float: right;
  color: #444444;
}
.van-search__action{
  color: #fff;
}
.van-search__action:active{
  background-color: #3B3D4E;
}
</style>
